<template>
	<view class="container">
		<view class="teacher-list" v-for="(item, index) in teacherList" :key="item.id">
			<u-swipe-action btn-width="88" :options="options" :show="item.show" :index="index" @open="open" @click="click">
				<view class="wd-flex" @click="setTeacher(item.id)">
					<image class="avatar" mode="aspectFill" :src="item.avatar" />
					<view class="wd-flex-cell">
						<view class="title">{{ item.name }}</view>
						<view>{{ item.mobile }}</view>
					</view>
					<view class="roles">{{ item.roles }}</view>
				</view>
			</u-swipe-action>
		</view>
		<view class="wd-floating" @click="setTeacher(0)">
			<u-icon name="plus" color="#fff" size="30" label="新增员工" label-size="16" label-color="#fff" label-pos="bottom"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [
					{
						text: '删除',
						style: {
							whiteSpace: 'nowrap',
							fontSize: '24rpx',
							backgroundColor: '#EB0000'
						}
					},
					{
						text: '停用',
						style: {
							whiteSpace: 'nowrap',
							fontSize: '24rpx',
							backgroundColor: '#D8D8D8'
						}
					},
					{
						text: '启动',
						style: {
							whiteSpace: 'nowrap',
							fontSize: '24rpx',
							backgroundColor: '#6D4BBE'
						}
					}
				],
				teacherList: [],
				teacherListMore:{page:1}
			}
		},
		onLoad(){
			this.fetch();
		},
		// 页面到达底部触发
		onReachBottom() {
			this.fetch();
		},
		methods: {
			refresh(){
				this.teacherList = [];
				this.teacherListMore = {page:1}
				this.fetch();
			},
			//获取老师
			fetch() {
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				this.$utils.fetch(this, 'fitness.manage/teacher_list', {shop_id:shop_id}, 'teacherListMore', 'teacherList', 'data', data=>{
				
				})
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.$set(this.teacherList[index],'show',true)
				this.teacherList.map((val, idx) => {
					if(index != idx) {
						this.$set(this.teacherList[index],'show',false)
					}
				})
			},
			click(index, index1) {
				var that = this;
				var teacherList = that.teacherList;
				var teacher_id = teacherList[index].id;
				if(index1 == 0){
					uni.showModal({
						title: '提示',
						content: '确定删除',
						success: function (res) {
						    if (res.confirm) {
								that.$core.post({url:'fitness.manage/del_teacher',data:{teacher_id:teacher_id},success:(ret)=>{
									that.$u.toast(ret.msg);
									that.refresh();
									return false;
								}});
							}
						}
					})
				}else{
					let visible_switch = 0;
					if(index1 == 2){
						visible_switch = 1;
					}
					
					that.$core.post({url:'fitness.manage/teacher_multi',data:{teacher_id:teacher_id,visible_switch:visible_switch},success:(ret)=>{
						that.$u.toast(ret.msg);
					}});
				}
			},
			//场馆详情
			setTeacher(e){
				let that = this;
				uni.navigateTo({
					url: "/pages/user/teacherDetail/teacherDetail?teacher_id="+e,
					events:{
						setSuccess:function(data){
							that.refresh()
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
	.teacher-list {
		margin: 24rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #333333;
		border-radius: 24rpx;
		overflow: hidden;
		.wd-flex {
			padding: 32rpx 34rpx;
		}
		.avatar {
			display: block;
			margin-right: 30rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
		.title {
			font-size: 28rpx;
			font-weight: 500;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.roles {
			margin-left: 30rpx;
			width: 280rpx;
			text-align: right;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
</style>